<template>
	<view class="column min-200" style="">
		<view class="column center font600 minau size36" style="color: #EB951E;">
			<image src="@/static/tabBar/index.png" mode="" style="width: 400rpx;height: 300rpx;"></image>
			文山土流农业
		</view>
		<view class="box">
			<view class="size36 font600" style="color: #4D2F00;">
				登录
			</view>
			<view class="padbottom20" style="border-bottom: 2rpx solid #FFE5A3;">
				<view class="u-demo-block__content" style="margin-top: 15px;">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="请输入登录手机号" type="number" maxlength="11" border="none" fontSize="14px"
						v-model="phone">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="请输入登录手机号" type="number" maxlength="11" border="none" fontSize="14px"
							v-model="phone">
						<!-- #endif -->
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCheckNum" :text="tips" shape="circle" customStyle="color: #885400;"
									hairline="false" type="info" size="small"></u-button>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
			</view>
			<view class="padbottom20 mintop20" style="border-bottom: 2rpx solid #FFE5A3;">
				<view class="u-demo-block__content" style="margin-top: 15px;">
					<u--input placeholder="请输入验证码" placeholderStyle="color: #B89865" type="number" border="none"
						fontSize="14px" v-model="code"></u--input>
				</view>
			</view>
			<!-- <view class="size26 font500 mintop10" style="color: #885400;text-align: end;"
				@click="$jump.nav('/mypackage/register')">
				立即注册
			</view> -->
			<view style="margin-top: 120rpx;margin-bottom: 20rpx;">
				<u-button shape="circle" color="linear-gradient( 136deg, #FFBC43 0%, #FFDA97 100%)"
					customStyle="color: #885400;font-weight: 600;" text="登录" @click="handleinput"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '发送验证码',
				phone: '',
				code: ''
			}
		},
		onLoad() {

		},
		methods: {
			async getCode() {
				this.code = 666888
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("SmsController/sendVerifyCode", {
					phone: this.phone
				})
				if (code == 1) {
					uni.$u.toast(msg);
					//初始数据

				} else {
					console.log(msg);
				}
			},
			async getLogin() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("AppletUser/mobileLogin", {
					mobile: this.phone,
					verify_code: this.code
				})
				var timeOut = 1000;
				if (code == 1) {
					var user_id = data; //组件登录成功后 获取 用户唯一的token
					//这两个写入本地缓存的的方法 第一个是异步 第二个是同步
					// uni.getStorage({});
					uni.setStorage({
						key: 'user_id',
						data: user_id,
						success(res) {
							uni.showToast({
								icon: 'success',
								title: '登陆成功！'
							});
							setTimeout(function() {
								//这个跳转表示的事 你设置了 底部菜单栏的时候 当前地址属于底部菜单栏的时候
								//我们用这个
								uni.switchTab({
									url: '/pages/index/index'
								});
								// this.$jump.switch('/pages/index/index')
								//其他类型页面地址用如下
								// uni.navigateTo({

								// })
							}, timeOut)

						},
						fail(res) {
							uni.showToast({
								icon: 'none',
								title: '登录失败，请重试！'
							})
						}
					})

					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token',token);
				} else {
					uni.$u.toast(msg);
				}
			},
			codeChange(text) {
				this.tips = text;
			},

			handleinput() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (!this.code) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else {

					this.getLogin();
					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token', token);
				}
			},
			getCheckNum() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.getCode()
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFF4D3 10%, #FFFFFF 30%);
		background-repeat: no-repeat;
	}
</style>

<style scoped lang="less">
	.box {
		padding: 40rpx 50rpx;
		margin: auto 80rpx;
		margin-top: 100rpx;
		background-color: #FFFAED;
	}
	.min-200 {
		/* #ifdef MP-WEIXIN */
		margin-top: 200rpx;
		/* #endif */
		/* #ifdef MP-TOUTIAO */
		margin-top: 100rpx;
		/* #endif */
	}
</style>